---
type: tutorial
title: 初めてのMarkdownによるブログ記事
description: |-
  「初めてのAstroブログ」チュートリアル -
  Markdownページをサイトに追加する
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro'
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

`.astro`ファイルを使ってページを作成したので、続いて`.md`ファイルを使ってブログ記事を作成しましょう！

<PreCheck>
  - 新しいフォルダを作成し、新しい記事を作成する
  - Markdownコンテンツを書く
  - ブログページにブログ記事へのリンクを作成する
</PreCheck>

## 最初の`.md`ファイルを作成する

<Steps>
1. `src/pages/posts/`に新しいディレクトリを作成します。

2. `post-1.md`という新しい（空の）ファイルを`/posts/`フォルダに追加します。

3. プレビュー用URLの末尾に`/posts/post-1`を追加して、このページをブラウザで確認します。（たとえば`http://localhost:4321/posts/post-1`）

4. ブラウザのプレビュー用URLを変更して、代わりに`/posts/post-2`を表示します。（これはまだ作成していないページです。）

    「空の」ページと存在しないページのプレビューにおいて、出力が異なることに注意してください。これは将来のトラブルシューティングに役立ちます。
</Steps>

## Markdownコンテンツを書く

<Steps>
1. `post-1.md`に以下のコードをコピーまたは入力します。

    ```markdown title="src/pages/posts/post-1.md"
    ---
    title: '私の最初のブログ記事'
    pubDate: 2022-07-01
    description: 'これは私の新しいAstroブログの最初の記事です。'
    author: 'Astro学習者'
    image:
        url: 'https://docs.astro.build/assets/full-logo-light.png' 
        alt: 'Astroのロゴ。'
    tags: ["astro", "ブログ", "公開学習"]
    ---
    # 私の最初のブログ記事

    投稿日: 2022-07-01

    Astroの学習についての私の _新しいブログ_ へようこそ！ここでは、新しいウェブサイトを作りながら、私の学習過程を共有します。

    ## 達成したこと

    1. **Astroのインストール**: まず、新しいAstroプロジェクトを作成し、オンラインアカウントを設定しました。

    2. **ページの作成**: 次に、新しい`.astro`ファイルを作成し、それを`src/pages/`フォルダに配置することで、ページを作成する方法を学びました。

    3. **ブログ記事の作成**: これが私の最初のブログ記事です！AstroページとMarkdownの記事があります！

    ## 次の目標

    Astroチュートリアルを終え、さらに記事を追加していきます。これからもこの場所をご覧ください。
    ```

2. `http://localhost:4321/posts/post-1`でブラウザのプレビューを再度確認します。今度はこのページにコンテンツが表示されるはずです。まだ適切な書式になっていないかもしれませんが、ご心配なく。このチュートリアルの後半で更新します！

3. ブラウザの開発者ツールを使用して、このページを検査します。HTML要素を何も入力していないにもかかわらず、MarkdownがHTMLに変換されていることに注意してください。見出し、段落、リスト項目などの要素が表示されます。
</Steps>

:::note
ファイルの上部、コードフェンスの内側にある情報は、フロントマターと呼ばれます。タグや記事画像などを含むこのデータは、Astroが使用可能な記事に関する情報です。自動的にページに表示されるわけではありませんが、チュートリアルの後半でサイトを改良するために使用します。
:::

## ブログ記事へのリンクを作成する

<Steps>
1. `src/pages/blog.astro`にアンカータグを追加して、最初の記事にリンクします。
    ```astro title="src/pages/blog.astro" ins={16-18}
    ---
    ---
    <html lang="ja">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">ホーム</a>
        <a href="/about/">概要</a>
        <a href="/blog/">ブログ</a>

        <h1>私のAstro学習ブログ</h1>
        <p>ここには、私がAstroを学んでいく旅の様子を投稿します。</p>
        <ul>
          <li><a href="/posts/post-1/">記事1</a></li>
        </ul>
      </body>
    </html>
    ```

2. `src/pages/posts/`に、`post-2.md`と`post-3.md`という2つのファイルを追加します。以下はコピー＆ペースト可能なサンプルコードですが、独自の内容を作成しても構いません。

    ```md title="src/pages/posts/post-2.md"
    ---
    title: 私の2番目のブログ記事
    author: Astro学習者
    description: "Astroを少し学んだら、止まらなくなりました！"
    image: 
        url: "https://docs.astro.build/assets/arc.webp"
        alt: "Astroのアークのサムネイル。"
    pubDate: 2022-07-08
    tags: ["astro", "ブログ", "公開学習", "成功"]
    ---
    Astroを学習し始めて最初の1週間が上手くいったので、もう少し試してみることにしました。小さなコンポーネントを書いてメモリーからインポートしました！
    ```

    ```md title="src/pages/posts/post-3.md"
    ---
    title: 私の3番目のブログ記事
    author: Astro学習者
    description: "上手くいかないことがありましたが、コミュニティに質問して助けてもらいました！"
    image: 
        url: "https://docs.astro.build/assets/rays.webp"
        alt: "Astroの光線のサムネイル。"
    pubDate: 2022-07-15
    tags: ["astro", "公開学習", "後退", "コミュニティ"]
    ---
    すべてがスムーズにいくわけではありませんでしたが、Astroで何かを作るのは楽しいです。そして、[Discordコミュニティ](https://astro.build/chat)は本当にフレンドリーで助けになります！
    ```

3. 新しい記事へのリンクを追加します。

    ```astro title="src/pages/blog.astro" ins={18-19}
    ---
    ---
    <html lang="ja">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">ホーム</a>
        <a href="/about/">概要</a>
        <a href="/blog/">ブログ</a>

        <h1>私のAstro学習ブログ</h1>
        <p>ここには、私がAstroを学んでいく旅の様子を投稿します。</p>
        <ul>
          <li><a href="/posts/post-1/">記事1</a></li>
          <li><a href="/posts/post-2/">記事2</a></li>
          <li><a href="/posts/post-3/">記事3</a></li>
        </ul>
      </body>
    </html>
    ```

4. ブラウザのプレビューを確認して、以下のことを確認します。

    記事1、記事2、記事3へのすべてのリンクが、サイト上の動作するページへとつながっている。（もし間違いを見つけたら、`blog.astro`のリンクかMarkdownファイル名を確認してください。）
</Steps>


<Box icon="question-mark">
### 確認テスト

1. Markdown（`.md`）ファイル内のコンテンツが変換されるのはどれですか？
    <MultipleChoice>
        <Option isCorrect>HTML</Option>
        <Option>CSS</Option>
        <Option>JavaScript</Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">
## チェックリスト

<Checklist>
- [ ] ブログ記事用に`src/pages/`内に新しいフォルダを作成できる。
- [ ] ブログ記事用に新しいMarkdown（`.md`）ファイルを作成できる。
- [ ] MarkdownはAstroと同じように、ブラウザでHTMLを生成する別の言語であることを理解した。
</Checklist>
</Box>

### 参考

- [Markdown Cheat Sheet from The Markdown Guide](https://www.markdownguide.org/cheat-sheet/)  <Badge class="neutral-badge" text="外部サイト" />

- [ブラウザーの開発者ツールとは？ MDN](https://developer.mozilla.org/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)  <Badge class="neutral-badge" text="外部サイト" />

- [YAML frontmatter](https://assemble.io/docs/YAML-front-matter.html)  <Badge class="neutral-badge" text="外部サイト" />
